<template>
	<view>
		<view>
			<uni-grid :column="2" :show-border="false" :square="false">
				<uni-grid-item><uni-tag text="同城帮买" :type="typeIndex == 0 ? 'error' : 'default'" :circle="true" :inverted='true'  @click=""></uni-tag></uni-grid-item>
				<uni-grid-item><uni-tag text="同城急送" :type="typeIndex == 1 ? 'error' : 'default'" :circle="true" :inverted='true' @click="tosend"></uni-tag></uni-grid-item>
			</uni-grid> 
		</view>
	<!-- 分类列表 -->
	<view class="category-list">
		<view
			class="category"
			v-for="row in categoryList"
			:key="row.id"
			@tap="toCategory(row.id,row.showName,row.placeholderName)">
			<view class="img"><image :src="row.typeImg"></image></view>
			<view class="text">{{ row.typename }}</view>
		</view>
		</view>
		</view>
</template>

<script>
	import uniGrid from '@/components/uni-grid/uni-grid.vue';
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
	import uniTag from '@/components/uni-tag/uni-tag.vue';
	export default {
		components: { uniGrid, uniGridItem, uniTag},
		data() {
			return {
				typeIndex:0,
				categoryList:[
					
				]
		}	
	},
	 async onLoad() {
		//获取帮买品种列表
		const res=await this.$myRequest({
			url:"/type/list"
		})
		this.categoryList=res.data.list;
		/* uni.request({
			url:this.baseurl+"/type/list",
			sslVerify:false,
			success: res=>{
				this.categoryList=res.data.list
			}
		}) */
	},methods:{
		toCategory(id,showName,placeholderName){
			if(this.$store.state.userInfo.id){
				uni.navigateTo({	
					url:"../flashexgooddetail/flashexgooddetail?id="+id+"&showName="+showName+"&placeholderName="+placeholderName
				})
			}else{
				uni.navigateTo({
					url:'../public/login-name'
				})
			}
			
		},
		tosend(){		
				uni.navigateTo({
					url:"flashexsend"
				})
		}
	}
	}
</script>

<style lang="scss">
.category-list {
	width: 92%;
	margin: 0 4%;
	padding: 0 0 30upx 0;
	border-bottom: solid 2upx #f6f6f6;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.category {
		width: 25%;
		margin-top: 50upx;
		display: flex;
		flex-wrap: wrap;
		.img {
			width: 100%;
			display: flex;
			justify-content: center;
			image {
				width: 9vw;
				height: 9vw;
			}
		}
		.text {
			margin-top: 16upx;
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 24upx;
			color: #3c3c3c;
		}
	}
}
</style>
